<!-- 图书馆分类 -->
<template>
    <div class="library">
        <div class="top-box clearfix">
            <router-link :to="{path:'/search',query: {}}"><div class="search-entry left">搜索你想要的图书</div></router-link>
            <!--<div class="btn-grade right" v-if="type==0" @click="gradeMaskShow=true">{{grade}}年级</div>-->
        </div>
        <!-- 学校书库 -->
        <div class="sort-item sort-school shadow1" v-if="type==1" @click="goSchoolSort()">
            <div class="school-label">学校书库</div>
            <img class="school-img left" src="@/assets/img/main/school.png" alt="">
            <div class="sort-name school-name left">
                <h4>{{school.categoryName}}</h4>
                <p>共{{school.count}}册</p>
            </div>
        </div>
        <!-- 分类列表 -->
        <ul class="sort-list"> 
            <li class="sort-item clearfix shadow1" v-for="(item,index) in sortList" :key="index" @click="goSort(item)">
                <img class="sort-img left" :src="item.categoryCover" alt="">
                <div class="sort-name left">
                    <h4>{{item.categoryName}}</h4>
                    <p>共{{item.count}}册</p>
                </div>
            </li>
        </ul>
        <!-- 年级选择遮罩 -->
        <transition name='fade'>
            <grade v-show="gradeMaskShow" :gradeMaskShow="gradeMaskShow" @gradeClose="gradeClose" @gradeChoseFun="gradeChoseFun"></grade>
        </transition>
    </div>
</template>

<script>
import grade from '@/components/Grade'
import { axGet } from '@/api/index'

export default {
    name: "library",
    components:{
        grade,
    },
    data(){
        return{
            type:this.$parent.myInfo.UserType,//0学生，1教师
            grade:'全',             //年级显示
            gradeMaskShow:false,    //年级遮罩
            school:{},              //学校对象
            sortList:[],            //分类列表
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=true; 
        this.$parent.menuChose=2;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.school={
                categoryBackground:'@/../static/img/school-bg.png',
                categoryName:this.$parent.myInfo.SchoolName+'书库',
                count:0,
            }

            this.getSort()
            if(this.type==1){
                this.getSchool()
            }
        }
    },
    mounted(){
    },
    destroyed(){
        this.gradeMaskShow=false;
    },
    methods:{
        goSchoolSort(){
            sessionStorage.setItem("thisSort",JSON.stringify(this.school))
            this.$router.push({path:'/libList',query: {school:this.$parent.myInfo.SchoolCode}});
        },
        goSort(item){
            sessionStorage.setItem("thisSort",JSON.stringify(item))
            this.$router.push({path:'/libList',query: {sortid:item.categoryId}});
        },
        //分类请求
        getSort(){
            axGet('GetBookCategory', {
                PageIndex: 1,
                PageSize:100,
            }).then(res => {
                if(res.ResultCode==1){
                   this.sortList= res.Value.list
                }
            })
        },
        //学校书库
        getSchool(){
            axGet('GetSchoolBookCount', {
                SchoolCode:this.$parent.myInfo.SchoolCode
            }).then(res => {
                if(res.ResultCode==1){
                  this.school.count=res.Value
                }
            })
        },
        // 年级选择
        gradeChoseFun(item,index){
            console.log(index)
            this.grade=item;
            this.gradeMaskShow=false;
        },
        gradeClose(){
            this.gradeMaskShow=false;
        },
    }
}
</script>
<style type="text/css" scoped>
    .library{
        width: 90%;
        height: 90%;
        overflow: scroll;
    }
    /* .sort-list:after {
        content: ".";
        width: 0;
        height: 0;
        visibility: hidden;
        display: block;
        clear: both;
        overflow: hidden;
    } */
    .top-box{
        padding:0 0.1rem 0.5rem;
    }
</style>

